<template>
  <div class="menu-preview">
    <!-- 竖向 -->
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-openeds="[]"
        :unique-opened="true"
        :style="{
          border: '6px solid green',
          padding: '0 0 100px',
          listStyle: 'none',
          margin: '60px 5px 15px',
          overflow: 'hidden',
          background: '#FFF',
          position: 'relative',
        }"
        class="el-menu-vertical-demo"
        default-active="0"
      >
        <el-image
          v-if="false"
          :style="{
            width: '44px',
            margin: '10px auto',
            objectFit: 'cover',
            borderRadius: '100%',
            display: 'block',
            height: '44px',
          }"
          src="../../assets/img/avator.png"
          fit="cover"
        ></el-image>
        <!-- src="http://codegen.caihongy.cn/20201114/7856ba26477849ea828f481fa2773a95.jpg" -->
        <!-- <el-menu-item index="0" @click="menuHandler('')">
					<i v-if='false' :style='{"width":"20px","verticalAlign":"middle","margin":"0 3px","fontSize":"18px","color":"inherit","textAlign":"center"}' class="el-icon-menu el-icon-s-home" />
					<span :style='{"color":"inherit","verticalAlign":"middle","fontSize":"14px"}'>系统首页</span>
				</el-menu-item> -->

        <el-submenu index="0" @click.native="menuHandler('')">
          <template slot="title">
            <i
              v-if="false"
              :style="{
                width: '20px',
                verticalAlign: 'middle',
                margin: '0 3px',
                fontSize: '18px',
                color: 'inherit',
                textAlign: 'center',
              }"
              class="el-icon-menu el-icon-s-home"
            />
            <span class="sidebar-span">系 统 首 页</span>
          </template>
        </el-submenu>

        <el-submenu index="1">
          <template slot="title">
            <i
              v-if="false"
              :style="{
                width: '20px',
                verticalAlign: 'middle',
                margin: '0 3px',
                fontSize: '18px',
                color: 'inherit',
                textAlign: 'center',
              }"
              class="el-icon-menu el-icon-user-solid"
            />
            <span class="sidebar-span">个 人 中 心</span>
          </template>
          <el-menu-item index="1-1" @click="menuHandler('updatePassword')"
            >修 改 密 码</el-menu-item
          >
          <el-menu-item index="1-2" @click="menuHandler('center')"
            >个 人 信 息</el-menu-item
          >
        </el-submenu>
        <el-submenu
          v-for="(menu, index) in menuList.backMenu"
          :key="menu.menu"
          :index="index + 2 + ''"
        >
          <template slot="title">
            <i
              v-if="false"
              :style="{
                width: '20px',
                verticalAlign: 'middle',
                margin: '0 3px',
                fontSize: '18px',
                color: 'inherit',
                textAlign: 'center',
              }"
              class="el-icon-menu"
              :class="icons[index]"
            />
            <span class="sidebar-span">{{ menu.menu }}</span>
          </template>
          <el-menu-item
            v-for="(child, sort) in menu.child"
            :key="sort"
            :index="index + 2 + '-' + sort"
            @click="menuHandler(child.tableName)"
            >{{ child.menu }}</el-menu-item
          >
        </el-submenu>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import menu from '@/utils/menu'
export default {
  data() {
    return {
      menuList: [],
      dynamicMenuRoutes: [],
      role: '',
      icons: [
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-fold',
        'el-icon-s-unfold',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-custom',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check',
        'el-icon-s-grid',
        'el-icon-menu',
        'el-icon-chat-dot-square',
        'el-icon-message',
        'el-icon-postcard',
        'el-icon-position',
        'el-icon-microphone',
        'el-icon-close-notification',
        'el-icon-bangzhu',
        'el-icon-time',
        'el-icon-odometer',
        'el-icon-crop',
        'el-icon-aim',
        'el-icon-switch-button',
        'el-icon-full-screen',
        'el-icon-copy-document',
        'el-icon-mic',
        'el-icon-stopwatch',
      ],
      menulistBorderBottom: {},
    }
  },
  mounted() {
    const menus = menu.list()
    if (menus) {
      this.menuList = menus
    } else {
      let params = {
        page: 1,
        limit: 1,
        sort: 'id',
      }

      this.$http({
        url: 'menu/list',
        method: 'get',
        params: params,
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.menuList = JSON.parse(data.data.list[0].menujson)
          this.$storage.set('menus', this.menuList)
        }
      })
    }
    this.role = this.$storage.get('role')

    for (let i = 0; i < this.menuList.length; i++) {
      if (this.menuList[i].roleName == this.role) {
        this.menuList = this.menuList[i]
        break
      }
    }
    this.styleChange()
  },
  created() {
    this.icons.sort(() => {
      return 0.5 - Math.random()
    })
  },
  methods: {
    styleChange() {
      this.$nextTick(() => {
        document
          .querySelectorAll('.el-menu-vertical-demo .el-submenu .el-menu')
          .forEach((el) => {
            el.removeAttribute('style')
            const icon = { border: 'none', display: 'none' }
            Object.keys(icon).forEach((key) => {
              el.style[key] = icon[key]
            })
          })
      })
    },
    menuHandler(name) {
      let router = this.$router
      name = '/' + name
      router.push(name)
    },
  },
}
</script>
<style lang="scss" scoped>
.menu-preview {
  border: 3px solid blue;
  .el-scrollbar {
    height: 100%;

    & /deep/ .scrollbar-wrapper {
      overflow-x: hidden;
    }

    // 竖向
    .el-menu-vertical-demo {
      .el-submenu:first-of-type
        /deep/
        .el-submenu__title
        .el-submenu__icon-arrow {
        display: none;
      }
    }

    .el-menu-vertical-demo > .el-menu-item {
      cursor: pointer;
      border-radius: 50px;
      padding: 0 15px;
      margin: 15px 0 0;
      color: #333;
      white-space: nowrap;
      background: rgba(219, 219, 219, 0.5);
      position: relative;
    }

    .el-menu-vertical-demo > .el-menu-item:hover {
      color: #fff;
      background: rgba(48, 184, 183, 1);
    }

    .el-menu-vertical-demo .el-submenu /deep/ .el-submenu__title {
      cursor: pointer;
      // font-size: 20px;
      border-radius: 5px;
      padding: 0 15px;
      margin: 10px 0 0;
      color: #333;
      white-space: nowrap;
      box-shadow: 0 4px 20px rgba(243, 21, 21, 0.2);
      background: linear-gradient(
        180deg,
        #5286f7 0%,
        #799ff1 10%,
        rgba(152, 196, 238, 0.85) 30%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(152, 196, 238, 0.85) 70%,
        #7da5fc 90%,
        #5286f7 100%
      );
      position: relative;
    }

    .el-menu-vertical-demo .el-submenu /deep/ .el-submenu__title:hover {
      color: #fff;
      background: linear-gradient(
        to bottom,
        #b8c3db 0%,
        #b1c8fa 10%,
        rgba(152, 196, 238, 0.85) 20%,
        rgba(49, 174, 247, 0.9) 35%,
        rgba(49, 174, 247, 0.9) 65%,
        rgba(152, 196, 238, 0.85) 80%,
        #b1c8fa 90%,
        #b8c3db 100%
      );
    }

    .sidebar-span {
      color: inherit;
      vertical-align: middle;
      font-size: 18px;
      font-weight: 550;
    }

    .el-menu-vertical-demo
      .el-submenu
      /deep/
      .el-submenu__title
      .el-submenu__icon-arrow {
      margin: -7px 0 0 0;
      top: 50%;
      color: inherit;
      vertical-align: middle;
      font-size: 12px;
      position: absolute;
      right: 20px;
    }

    .el-menu-vertical-demo .el-submenu {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    // .el-menu-vertical-demo .el-submenu /deep/ .el-menu {
    // 				// 		border: none;
    // 				// 		display: none;
    // 				// }

    .el-menu-vertical-demo .el-submenu /deep/ .el-menu .el-menu-item {
      padding: 0 40px;
      margin: 1px 0;
      color: #555;
      background: rgba(249, 249, 249, 1);
      line-height: 50px;
      height: 50px;
    }

    .el-menu-vertical-demo .el-submenu /deep/ .el-menu .el-menu-item:hover {
      padding: 0 40px;
      color: #333;
      background: rgba(0, 255, 255, 0.753);
      line-height: 50px;
      height: 50px;
    }

    .el-menu-vertical-demo .el-submenu /deep/ .el-menu .el-menu-item.is-active {
      padding: 0 40px;
      color: #333;
      // background: rgba(27, 167, 166, 0.5);
      background: rgba(59, 152, 240, 0.85);
      line-height: 50px;
      height: 50px;
    }
    // 竖向
  }
}
</style>
